<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11_Fetch-Fetch函数基本使用</title>
  <!-- 
  Fetch API 是现代浏览器中用于进行网络请求的接口，提供了一种更简洁和强大的方式来替代传统的 XMLHttpRequest（XHR）。使用 Fetch API，可以更方便地进行 GET、POST 等请求，并处理响应数据。
  1. Fetch 函数的基本用法
  Fetch 函数的基本语法如下：
  fetch(url, options)
  - url：请求的资源地址（字符串）。
  - options：可选的配置对象，包含请求方法、请求头、请求体等信息。

  2. 基本示例
   2.1 GET 请求
  最简单的使用方式是进行一个 GET 请求：
  fetch('https://api.example.com/data')
      .then(response => {
          if (!response.ok) {
              throw new Error('网络响应不是 OK');
          }
          return response.json(); // 解析 JSON 数据
      })
      .then(data => {
          console.log(data); // 处理获取的数据
      })
      .catch(error => {
          console.error('请求失败:', error);
      });
  3. POST 请求
  进行 POST 请求时，需要在 options 对象中指定方法和请求体：
  fetch('https://api.example.com/data', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json' // 设置请求头
      },
      body: JSON.stringify({ key: 'value' }) // 请求体
  })
      .then(response => {
          if (!response.ok) {
              throw new Error('网络响应不是 OK');
          }
          return response.json(); // 解析 JSON 数据
      })
      .then(data => {
          console.log(data); // 处理获取的数据
      })
      .catch(error => {
          console.error('请求失败:', error);
      });
  4. 处理响应
  Fetch API 返回一个 Promise 对象，解析响应时可以使用以下方法：
  - response.json()：将响应体解析为 JSON 对象。
  - response.text()：将响应体解析为文本。
  - response.blob()：将响应体解析为 Blob 对象，适合处理二进制数据。
  - response.formData()：将响应体解析为 FormData 对象。

  5. 错误处理
  Fetch API 不会自动处理 HTTP 错误状态（如 404 或 500），需要手动检查  `response.ok`  属性来判断请求是否成功。

  6. 取消请求
  Fetch API 本身不支持取消请求，但可以使用  `AbortController`  来实现：
  const controller = new AbortController();
  const signal = controller.signal;

  fetch('https://api.example.com/data', { signal })
      .then(response => {
          if (!response.ok) {
              throw new Error('网络响应不是 OK');
          }
          return response.json();
      })
      .then(data => {
          console.log(data);
      })
      .catch(error => {
          if (error.name === 'AbortError') {
              console.log('请求被取消');
          } else {
              console.error('请求失败:', error);
          }
      });

  // 取消请求
  controller.abort();
  总结
  - Fetch API 提供了一种更现代化的方式来进行网络请求。
  - 基本用法：使用  `fetch(url, options)`  进行请求，返回一个 Promise。
  - 处理响应：使用  `response.json()` 、 `response.text()`  等方法解析响应数据。
  - 错误处理：手动检查  `response.ok`  属性来判断请求是否成功。
  - 取消请求：使用  `AbortController`  来实现请求的取消。
  -->
</head>
<body>

  <script>

    // 1. fetch 函数的基本使用 get 请求
    // 1.1 
    // fetch('http://123.207.32.32:8000/home/multidata')
    // .then(response => {
    //   const data = response.json()

    //   data.then(res => {
    //     console.log(res)
    //   })
    // })
    // .catch(err => {
    //   console.log(err)
    // })

    // // 1.2 
    // fetch('http://123.207.32.32:8000/home/multidata')
    // .then(response => {
    //   return response.json()
    // })
    // .then(data => {
    //   console.log(data)
    // })

    // 1.3
    // async function getData() {
    //   const response = await fetch('http://123.207.32.32:8000/home/multidata')
    //   const res = await response.json()
    //   console.log(res.data);
    // }
    // getData()

    // 2. post 请求
    async function postData() {
       // const response = await fetch("http://123.207.32.32:1888/02_param/postjson", {
      //   method: "post",
      //   // headers: {
      //   //   "Content-type": "application/json"
      //   // },
      //   body: JSON.stringify({
      //     name: "fetch",
      //     age: 18
      //   })
      // })

      const formData = new FormData()
      formData.append('name', 'fetch')
      formData.append('age', 18)

      const response = await fetch("http://123.207.32.32:1888/02_param/postjson", {
        method: "post",
        body: formData
      })

      // 获取response状态
      console.log(response.status, response.ok, response.statusText);
      
      const res = await response.json()
      console.log(res)
    }

    postData()
    

  




  </script>
  
</body>
</html>